
import {defineComponent, ref, watch, shallowReactive} from 'vue';
import { getAssetsImages } from '@/utils/utils';

// 声明类型
const PropsType = {
    cdata: {
        type: Object,
        require: true
    }
} as const

// 定义主体

export default defineComponent({
    props: PropsType,
    setup(props, {emit}) {

        const _panelImageURL = getAssetsImages('custom-gauge-panel.png');
        // const _panelImageURL = 'https://echarts.apache.org/examples/data/asset/img/custom-gauge-panel.png';
        const _animationDuration = 1000;
        const _animationDurationUpdate = 1000;
        const _animationEasingUpdate = 'quarticInOut';
        // const _valOnRadianMax = 100;
        const _valOnRadianMax = props.cdata.goal;
        const _outerRadius = 380; // 圆环外半径
        const _innerRadius = 330; // 圆环内半径
        const _pointerInnerRadius = 30;
        const _insidePanelRadius = 0; // 内圆半径
        const _currentDataIndex = 0;

        function renderItem(params, api) {
            const valOnRadian = api.value(1);
            const coords = api.coord([api.value(0), valOnRadian]);
            const polarEndRadian = coords[3];
            const imageStyle = {
                image: _panelImageURL,
                x: params.coordSys.cx - _outerRadius,
                y: params.coordSys.cy - _outerRadius,
                width: _outerRadius * 2,
                height: _outerRadius * 2
            };
            return {
                type: 'group',
                children: [
                    {
                        type: 'image',
                        style: imageStyle,
                        clipPath: {
                            type: 'sector',
                            shape: {
                                cx: params.coordSys.cx,
                                cy: params.coordSys.cy,
                                r: _outerRadius,
                                r0: _innerRadius,
                                startAngle: 0,
                                endAngle: -polarEndRadian,
                                transition: 'endAngle',
                                enterFrom: { endAngle: 0 }
                            }
                        }
                    },
                    {
                        type: 'image',
                        style: imageStyle,
                        clipPath: {
                            type: 'polygon',
                            shape: {
                                points: makePionterPoints(params, polarEndRadian)
                            },
                            extra: {
                                polarEndRadian: polarEndRadian,
                                transition: 'polarEndRadian',
                                enterFrom: { polarEndRadian: 0 }
                            },
                            during: function (apiDuring) {
                                apiDuring.setShape(
                                    'points',
                                    makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
                                );
                            }
                        }
                    },
                    {
                        type: 'circle',
                        shape: {
                            cx: params.coordSys.cx,
                            cy: params.coordSys.cy,
                            r: _insidePanelRadius
                        },
                        style: {
                            fill: '#fff',
                            shadowBlur: 25,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowColor: 'rgba(76,107,167,0.4)'
                        }
                    },
                    {
                        type: 'text',
                        extra: {
                            valOnRadian: valOnRadian,
                            transition: 'valOnRadian',
                            enterFrom: { valOnRadian: 0 }
                        },
                        style: {
                            text: makeText(valOnRadian),
                            fontSize: 16,
                            fontWeight: 700,
                            x: params.coordSys.cx,
                            y: params.coordSys.cy,
                            fill: 'rgb(255,255,255)',
                            align: 'center',
                            verticalAlign: 'middle',
                            enterFrom: { opacity: 0 }
                        },
                        during: function (apiDuring) {
                            apiDuring.setStyle(
                                'text',
                                makeText(apiDuring.getExtra('valOnRadian'))
                            );
                        }
                    },
                ]
            };
        }
        function convertToPolarPoint(renderItemParams, radius, radian) {
            return [
                Math.cos(radian) * radius + renderItemParams.coordSys.cx,
                -Math.sin(radian) * radius + renderItemParams.coordSys.cy
            ];
        }
        function makePionterPoints(renderItemParams, polarEndRadian) {
            return [
                convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
                convertToPolarPoint(
                    renderItemParams,
                    _outerRadius,
                    polarEndRadian + Math.PI * 0.03
                ),
                convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
            ];
        }
        function makeText(valOnRadian) {
            // console.log('valOnRadian', valOnRadian)
            // Validate additive animation calc.
            if (valOnRadian < -10) {
                alert('illegal during val: ' + valOnRadian);
            }
            return ((valOnRadian / _valOnRadianMax) * 100).toFixed(0) + '%';
        }

        const chartRef = ref(null);

        // 配置项
        let option = shallowReactive({
            animationEasing: null,
            animationDuration: null,
            animationDurationUpdate: null,
            animationEasingUpdate: null,
            dataset: null,
            angleAxis: null,
            radiusAxis: null,
            polar: null,
            series: null,
            tooltip: null,
        })

        watch(
            () => props.cdata,
            (val: any) => {
                option = {
                    animationEasing: _animationEasingUpdate,
                    animationDuration: _animationDuration,
                    animationDurationUpdate: _animationDurationUpdate,
                    animationEasingUpdate: _animationEasingUpdate,
                    dataset: {
                        source: [[1, val.value]]
                    },
                    angleAxis: {
                        type: 'value',
                        startAngle: 0,
                        show: false,
                        min: 0,
                        max: _valOnRadianMax
                    },
                    tooltip: {},
                    radiusAxis: {
                        type: 'value',
                        show: false
                    },
                    polar: {},
                    series: [
                        {
                            type: 'custom',
                            coordinateSystem: 'polar',
                            renderItem: renderItem
                        }
                    ]
                }
            },
            {
                immediate: true,
                deep: true
            }
        )

        return () => {
            return <vue-echarts ref={chartRef} autoresize={true} option={option} />
        }
    }
})
